<template>
  <el-upload
    class="avatar-uploader"
    action="#"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
  >
    <img v-if="imageUrl" :src="imageUrl" class="avatar">
    <i v-else class="avatar-uploader-icon">上传图片</i>
    <div class="el-icon-close close" />
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: ''
    }
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>

  <style lang="scss" scoped>
    .avatar-uploader ::v-deep .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-style: normal;
      font-size: 14px;
      color:black;
      display: block;
      width: 100px;
      height: 60px;
      line-height: 60px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }

    .avatar-uploader{
      position: relative;
    }
    .el-upload{
      .close{
          position: absolute;
          width: 20px;
          height: 20px;
          font-size: 12px;
          border: 1px solid #ccc;
          border-radius: 50%;
          color:rgb(69, 68, 68);
          right: -8px;
          top: -8px;
          text-align: center;
          line-height: 20px;
          z-index: 1;
      }
    }
   ::v-deep .el-upload.el-upload--text {
      overflow: visible;
    }
  </style>
